<template>
  <el-container>
    <el-header  class="head" style="margin-top: 15px">







        <div class="head-biaoqian2">
        <el-tag style="height: 60px;width: 120px;line-height: 60px;font-size: 20px">空房</el-tag>
          <el-tag type="danger" style="height: 60px;width: 120px;margin-left: 5px;line-height: 60px;font-size: 20px">使用中
          </el-tag>




      </div>
    </el-header>
    <el-container >
      <el-aside style="width: 1200px;">
        <div class="house1" >
          <el-tabs  v-model="activeName" type="border-card" class="biaoqian" style="text-align: center;width: 1155px;"
          >

            <div class="biaozhunpage1">
              <el-row class="first-row" style="margin-top: 5px;margin-left: -16px;">
                <el-button  v-for="(item,index) in normalList"  @click="getNormalList(item)"
                            :type="getRoomColor(item.roomStatus)" plain
                            style="margin-left: 14px; margin-top:10px;height: 115px;width: 115px">
                  <h3>{{item.roomNumber}}</h3>
                  <div>
                    <dict-tag :options="dict.type.yqg_room_type" :value="item.roomType"/>

                  </div>
                </el-button>

              </el-row>

            </div>




          </el-tabs>

        </div>

      </el-aside>
      <el-main class="hello">
        <div class="main-head1">
          <div class="main-head-left1" style="width: 100%" >
            <el-divider ><span style="font-size: 20px">客房实时信息</span></el-divider>
            <div class="main-head-left-down1"  v-for="item in numberList" style="margin-left: 15px">
              <el-descriptions>
                <el-descriptions-item label="客房类型"><span style="color:red;font-size: 15px">
                   <dict-tag :options="dict.type.yqg_room_type" :value="item.roomType"/>
                </span>
                </el-descriptions-item>
                <el-descriptions-item label="房间号">{{item.roomNumber}}</el-descriptions-item>
              </el-descriptions>
              <el-descriptions direction="vertical">

                <el-descriptions-item label="客房状态">
                  <el-steps :space="200" :active="Number(item.roomStatus)" finish-status="success"
                            style="width: 600px;margin-left:
                  10px">
                  <el-step title="空房"></el-step>
                    <el-step title="使用中"></el-step>
                  <el-step title="已退房"></el-step>
                  <el-step title="打扫中"></el-step>
                </el-steps>
                </el-descriptions-item>

              </el-descriptions>
              <el-descriptions v-if="item.roomStatus==1">
                <el-descriptions-item label="客房信息">
                  <div>
                    <span>手牌号：<span style="color: red">{{item.handBrand}}</span></span><br>
                    <span>开房时间:</span><span style="color: red">{{item.note1}}</span><br>
                    <span v-if="item.inmate != '' && item.inmate !== null">同住手牌:<span style="color: red">{{item.inmate}}</span></span>
                    <span v-else-if="item.wakeUp != '' && item.wakeUp !== null">叫醒时间:<span style="color: red">{{item.wakeUp}}</span></span>
                    <br>
                    <!-- <span style="color: blue">13.养生足道</span><span>（手牌号：<span style="color: red">8800</span>  时间：<span style="color: red">16:40:55</span>）</span><br> -->
                  </div>
                </el-descriptions-item>
              </el-descriptions>

              <el-descriptions  v-if="item.entryName != '' && item.entryName !== null"  style="margin-top: -10px;">
                <el-descriptions-item label="客房消费记录">
                  <div style="text-align: center">
                    <span style="color: blue">{{item.entryName}}</span><span>（手牌号：<span style="color: red">
                    {{item.handBrand}}</span>
                    时间：<span
                      style="color: red">{{item.actualTime}}</span>）</span><br>
                    <!--                    <span style="color: blue">13.养生足道</span><span>（手牌号：<span style="color: red">8800</span>  时间：<span style="color: red">16:40:55</span>）</span><br>-->
                    <!--                    <span style="color: blue">13.养生足道</span><span>（手牌号：<span style="color: red">8800</span>  时间：<span style="color: red">16:40:55</span>）</span><br>-->
                    <!--                    <span style="color: blue">13.养生足道</span><span>（手牌号：<span style="color: red">8800</span>  时间：<span style="color: red">16:40:55</span>）</span><br>-->
                  </div>
                </el-descriptions-item>
              </el-descriptions>


            </div>

          </div>

        </div>
<!--        <div class="main-head-left" style="width: 100%;margin-top: 40px;height: 50%;"  >-->
<!--          <el-divider ><span style="font-size: 20px">其他服务</span></el-divider>-->
<!--          <div class="main-head-left-down"  style="margin-left: 15px">-->
<!--            <el-descriptions>-->
<!--              <el-descriptions-item    label="休息到时"><span v-for="item in latterList"-->
<!--                                                          style="color:red;font-size: 15px;margin-left: 8px;">-->
<!--                  {{item.roomNumber}}-->
<!--                </span>-->

<!--              </el-descriptions-item>-->

<!--            </el-descriptions>-->
<!--            </div>-->
<!--            <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 20px;">-->




<!--              <el-descriptions-item label="正在打扫的客房" style="margin-left: 13px;">-->
<!--                <div style="margin-top: -32px;margin-left: 108px;">-->
<!--      <span v-for="item in cleanList"-->
<!--            style="color:red;font-size: 15px;margin-left: 8px;">-->
<!--                  {{item.roomNumber}}-->
<!--                </span>-->
<!--                </div>-->
<!--              </el-descriptions-item>-->

<!--            </el-descriptions>-->

<!--          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">-->


<!--            <el-descriptions-item label="叫醒房间号" style="margin-left: 13px;">-->
<!--              <div style="margin-top: -32px;margin-left: 80px;">-->
<!--      <span v-for="item in wakeList"-->
<!--            style="color:red;font-size: 15px;margin-left: 8px;">-->
<!--                  {{item.roomNumber}}-->
<!--                </span>-->
<!--              </div>-->
<!--            </el-descriptions-item>-->

<!--          </el-descriptions>-->

<!--          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">-->


<!--            <el-descriptions-item label="空闲房间" style="margin-left: 13px;">-->
<!--              <div style="margin-top: -32px;margin-left: 80px;">-->
<!--      <span v-for="item in emptyList"-->
<!--            style="color:red;font-size: 15px;margin-left: 8px;">-->
<!--                  {{item.note3}}间-->
<!--                </span>-->
<!--              </div>-->
<!--            </el-descriptions-item>-->

<!--          </el-descriptions>-->

<!--          <el-descriptions direction="vertical" style="margin-left: 13px;margin-top: 16px;">-->


<!--            <el-descriptions-item label="使用中房间" style="margin-left: 13px;">-->
<!--              <div style="margin-top: -32px;margin-left: 80px; ">-->
<!--      <span v-for="item in emptyList" v-if="item.note4 != '' && item.note4 !== null"-->
<!--            style="color:red;font-size: 15px;margin-left: 8px;">-->
<!--                  {{item.note4}}间-->
<!--                </span>-->
<!--              </div>-->
<!--            </el-descriptions-item>-->

<!--          </el-descriptions>-->





<!--        </div>-->


      </el-main>
    </el-container>
  </el-container>
</template>

<script>

import {
  listRoom,
  getLoNumber,
}
  from
    "@/api/module/zxm/lobby";
// import {addRoom, updateRoom} from "@/api/project/room";
export default {
  name: "HorseOrder",
  dicts: ['yqg_room_type','yqg_room_status','yqg_hand_category', 'yqg_hand_state', 'yqg_room_status'],
  data() {
    return {
      menuList: [],
      List:[],
      normalList:[],
      numberList:[],
      latterList:[],
      cleanList:[],
      wakeList:[],
      emptyList:[],
      joinList:[],
      prices: [],
      consumption:null,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      back:false,
      cleaner:false,
      over:false,
      // 表单参数
      form: {},
      rules1: {

        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],

      },

      rules2: {

        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
        handBrand: [
          { required: true, message: "手牌号不能为空", trigger: "blur" },
        ],
        note2: [
          { required: true, message: "退房时间不能为空", trigger: "blur" }
        ],
        whetherLeave:[
          { required: true, message: "同住不能为空", trigger: "blur" }
        ],
      },
      rules: {
        handBrand: [
          { required: true, message: "手牌号不能为空", trigger: "blur" },
        ],
        handCategory: [
          { required: true, message: "手牌类别不能为空", trigger: "blur" }
        ],
        handState: [
          { required: true, message: "手牌状态不能为空", trigger: "blur" }
        ],
        roomNumber: [
          { required: true, message: "房间号不能为空", trigger: "blur" }
        ],
        note1: [
          { required: true, message: "开房时间不能为空", trigger: "blur" }
        ],
        roomCharges: [
          { required: true, message: "房间费用不能为空", trigger: "blur" }
        ],
        roomType: [
          { required: true, message: "房间类型不能为空", trigger: "blur" }
        ],
        waiter:[
          { required: true, message: "服务员不能为空", trigger: "blur" }
        ],
      },
      activeName: 'first',
      formInline: {
        user: '',
        region: ''

      }
    }
  },
  created() {
    // this.$root.$on('websocket-message', this.handleWebSocketMessage);
    // this.getEmpty();
    // this.getAwaken();
    // this.getHonest();
    // this.getLatter();
    this.getNormal();
    this.getNormalList();

  },
  watch: {
    activeName:function(val)  { //监听切换状态-计划单
      if (val=='first'|| val==null){
        this.List = undefined;
        this.loading = true;
        listNormal().then(response => {
          this.normalList = response.data;
          this.loading = false;
          // console.log(this.normalList+"233");
        });
      }

      else {
        getMenu(val).then(response => {
          this.List = response.data;
          this.loading = false;
        })};

    },




  },
  methods: {
    //将阿拉伯数字转换成语音大写
    converNumber(roomNumber) {
      const digits = ['零', '一', '二', '三', '四', '五', '六', '七', '八', '九'];

      let result = '';
      let numStr = String(roomNumber);

      for (let i = 0; i < numStr.length; i++) {
        const digitIndex = Number(numStr[i]);
        result += digits[digitIndex];
      }

      return result;
    },


    getEmpty(){
      getStatus().then(response => {
        this.emptyList = response.data;
      });
    },

    // beforeDestroy() {
    //   // 解绑 websocket-message 事件
    //   this.$root.$off('websocket-message', this.handleWebSocketMessage);
    // },
    // //叫醒到时的提醒
    // handleWebSocketMessage(data) {
    //   // 处理接收到的消息
    //   console.log(data+"我是data");
    //
    //   for (let i = 0; i < 2; i++) {
    //     const roomNumber = Number(data.msgContent.slice(0, 4));
    //     const chineseNumber = this.converNumber(roomNumber);
    //     console.log(chineseNumber+"我是number");
    //     const message = new SpeechSynthesisUtterance(`房间${chineseNumber}叫醒到时！`);
    //     window.speechSynthesis.speak(message);
    //   }
    // },

    //存储同来手牌号
    handleConfirm(inmate){
      var arr = [];

      this.form.inmate = inmate+","
      // if (this.form.inmate.charAt(this.form.inmate.length - 1)==",") {
      //   console.log("hello ")
      //   arr = this.form.inmate.substring(0, this.form.inmate.length- 1).split(",");
      //   this.form.inmate = arr
      // }

    },

    //获取叫醒的房间号
    getAwaken(){
      getWake().then(response => {
        this.wakeList = response.data;
      });
    },
    getRoomColor(status){
      if (status === '0') {
        return 'primary'; // 成功状态的颜色类名
      } else if (status === '1') {
        return 'danger'; // 警告状态的颜色类名
      } else if (status === '2') {
        return 'warning'; // 错误状态的颜色类名
      } else if (status === '3') {
        return 'success'; // 其他状态的颜色类名，可以为空字符串或其他默认颜色类名
      }

    },
    //根据房间号变化的
    handleRoomNumberChange(roomNumber){



        clearTimeout(this.inputTimer)
        // 设置一个新的定时器
        this.inputTimer = setTimeout(() => {

         if (roomNumber.length>1){
           getJoin(this.form.roomNumber).then(response => {
             this.joinList = response.data
             this.form.roomType = this.joinList[0].note5

             // 获取当前房间类型对应的费用信息
             const fees = this.joinList.map(item => item.entryName)
             // 去重并排序
             this.prices = Array.from(new Set(fees)).sort((a, b) => a - b)

           })
         }
         else {
           this.joinList = []
           this.prices = []
         }
        }, 1000) // 延迟1000毫秒执行


    },







    //查询休息到时的e
    getLatter(){

      getUnBack().then(response => {
        this.latterList = response.data;
      });
    },
    //查看清洁的房间号
    getHonest(){
      getClean().then(response => {
        this.cleanList = response.data;
      });
    },
    //获取标准房信息
    getNormal(){
      this.loading = true;
      listRoom().then(response => {
        this.normalList = response.data;
        console.log(this.normalList+"56")
        this.loading = false;
      });
    },

    getNormalList(item){
      if (item==null){
        const number = "8231"
        getLoNumber(number).then(response => {
          this.numberList = response.data;
        });
      }

      const number = item.roomNumber;
      getLoNumber(number).then(response => {
        this.numberList = response.data;

      });

    },

    /** 提交按钮，退房的*/
    submitForm1() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          updateRoom(this.form).then(response => {
            this.$modal.msgSuccess("退房成功");
            this.getEmpty();
            this.getLatter()
            listNormal().then(response => {
              this.normalList = response.data;
            });
            getWake().then(response => {
              this.wakeList = response.data;
            });
            getNumber(this.form.roomNumber).then(response => {
              this.numberList = response.data;
            });
            this.back = false;
          });
        }
      });
    },
    /** 提交按钮，开始洁房的*/
    // submitForm2() {
    //   this.$refs["form"].validate(valid => {
    //     if (valid) {
    //       sanitaryRoom(this.form).then(response => {
    //                   listNormal().then(response => {
    //                     this.normalList = response.data;
    //                   });
    //                   this.getHonest();
    //                   this.getEmpty();
    //                   getNumber(this.form.roomNumber).then(response => {
    //                     this.numberList = response.data;
    //                   });
    //                   this.cleaner = false;
    //                   this.$modal.msgSuccess("开始洁房");
    //                 });
    //     }
    //   });
    // },

    /** 提交按钮，开始完成的*/
    submitForm3() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          getNumber(this.form.roomNumber).then(response => {
            this.numberList = response.data;
            this.numberList = Object.values(response.data);
            this.numberList.forEach(item=>{
              if(item.roomStatus === '2') { // 判断status属性是否为某个值（例如'xxxxx'）
                this.$modal.msgSuccess("开始洁房");
              }
              if(item.roomStatus === '3') {
                this.$modal.msgSuccess("洁房已完成");
              }if(item.roomStatus === '0'||item.roomStatus === '1') {
                this.$modal.msgWarning("当前房间不能洁房");
              }
            })
          });
          setTimeout(() => {
            sanitaryRoom(this.form).then(response => {
              listNormal().then(response => {
                this.normalList = response.data;

                // console.log(this.normalList+"233");
              });
              this.getHonest();
              this.getEmpty();
              getNumber(this.form.roomNumber).then(response => {
                this.numberList = response.data;
              });
              this.over = false;

            });
          }, 500); // 设置0.5秒的延迟
        }
      });
    },
    /** 提交按钮,洁房的 */
    submitForm2() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          getNumber(this.form.roomNumber).then(response => {
            this.numberList = response.data;
            this.numberList = Object.values(response.data);
            this.numberList.forEach(item=>{
              if(item.roomStatus === '2') { // 判断status属性是否为某个值（例如'xxxxx'）
                this.$modal.msgSuccess("开始洁房");
              }
              if(item.roomStatus === '3') {
                this.$modal.msgSuccess("洁房已完成");
              }if(item.roomStatus === '0'||item.roomStatus === '1') {
                this.$modal.msgWarning("当前房间不能洁房");
              }
            })
          });
          setTimeout(() => {
            sanitaryRoom(this.form).then(response => {
              listNormal().then(response => {
                this.normalList = response.data;

                // console.log(this.normalList+"233");
              });
              this.getHonest();
              this.getEmpty();
              getNumber(this.form.roomNumber).then(response => {
                this.numberList = response.data;
              });
              this.cleaner = false;

            });
          }, 500); // 设置0.5秒的延迟
        }
      });
    },

    /** 提交按钮，开房的*/
    submitForm() {
      this.$refs["form"].validate(valid => {

        if (valid) {
          addRoom(this.form).then(response => {
            this.$modal.msgSuccess("开房成功");
            this.open = false;
            this.getNormal();
            this.getEmpty();
            this.getAwaken();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 取消按钮
    cancel1() {
      this.back = false;
      this.reset();
    },
    // 取消按钮
    cancel2() {
      this.cleaner = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        ID: null,
        handBrand: null,
        handCategory: null,
        handState: null,
        roomNumber: null,
        roomType: null,
        roomStatus: null,
        openingHours: null,
        checkOutTime: null,
        roomCharges: null,
        actualTime: null,
        whetherLeave:null,
        chargingTime: null,
        timeRemaining: null,
        cleanerNumber: null,
        wakeUp: null,
        inmate:null,
        waiter: null,
        artificer: null,
        entryName: null,
        note: null,
        note1: null,
        note2: null,
        note3: null,
        note4: null,
        note5: null,
        note6: null,
        note7: null,
        note8: null,
        note9: null,
        note10: null
      };
      this.resetForm("form");
    },
    /** 开房按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "开房信息";
    },
    //展示退房对话框
    backAdd() {
      this.reset();
      this.back = true;
      this.title = "退房信息";
    },
    //展示清房对话框
    cleanUp() {
      this.reset();
      this.cleaner = true;
      this.title = "洁房信息";
    },
    getOver(){
      this.reset();
      this.over = true;
      this.title = "洁房信息";
    }
  }
}
</script>

<style>
.button1{
  background-color: #ebd4ef;
  border: #9c26b0;
}
.button1:hover{
  background: #e1d7f0 !important;
}
.head{
  background-color: #FFFFFF;
  color: #333;
  margin-left: 10px;
  margin-right: 10px;
}
.head-icon{
  float: left;
  margin-top: 0px;
}
.head-biaoqian2{
  text-align: center;
  margin-top: 1px;
  margin-left: 910px;
}
.el-aside {
  background-color: #E9EEF3;
  color: #333;
  min-width: 600px;
  text-align: center;
  margin-top: 5px;
  height: 765px;
  margin-left: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}

.house1 {
  background-color: #9c26b0;
  max-width: 600px;
  margin-top: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.biaoqian {
  height:712px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  overflow-y: auto;
  overflow-x: hidden;
}

.biaoqian::after {
  height: 0;
  border: none;
}

.el-tabs__header {
  border: none !important;
}
.biaozhunpage1{
  overflow-y: auto ;
  overflow-x: hidden;
}

.hello {
  background-color: #E9EEF3;
  color: #333;
  width: 800px;
  height: 765px;
  text-align: center;
  margin-left: 10px;
  margin-right: 10px;
  margin-top: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head1{
  height: 300px;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head-left1{
  height: 300px;
  width: 500px;
  float: left;
  margin-right: 5px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-head-right1{
  height: 300px;
  width: 540px;
  float: right;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-down1{
  height: 425px;
  width: 1055px;
  margin-top: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
}
.main-down-table{
  height: 425px;
  width: 1055px;
  margin-top: 10px;
  background-color: #FFFFFF;
  border-radius: 4px;
}
::-webkit-scrollbar{
  width: 0!important;
}
::-webkit-scrollbar {
  width: 0 !important;
  height: 0;
}
</style>
